import { type FC } from 'react';
import { View } from 'react-native';
import { useMemoizedFn } from 'ahooks';
import type { MenuProps, MenuItemType } from './types';
import MenuItem from './item';
import styles from './styles';

const Menu: FC<MenuProps> = (props) => {
  const { items = [], activeKeys = [] } = props;

  const onChange = useMemoizedFn((item: MenuItemType) => {
    props.onChange?.(item.value);
  });

  return (
    <View style={styles.menu}>
      {items.map((item, i) => {
        const total = items.length;
        const selected = !!activeKeys.find(key => {
          return item.value === key;
        });
        return (
          <MenuItem
            {...item}
            key={item.value}
            onPress={onChange}
            selected={selected}
            isLast={total - 1 === i}
          />
        );
      })}
    </View>
  );
}

export default Menu;